<template>
  <div>
    <header>
      <section @click="golast">
        <svg
          data-v-cec0c0c0=""
          width="100%"
          height="100%"
          xmlns="http://www.w3.org/2000/svg"
          version="1.1"
        >
          <polyline
            data-v-cec0c0c0=""
            points="12,18 4,9 12,0"
            style="fill: none; stroke: rgb(255, 255, 255); stroke-width: 2"
          ></polyline>
        </svg>
      </section>
      <section>账户信息</section>
      <section></section>
    </header>
    <section class="section">
      <input type="file" class="file" @change="imgs($event)" />
      <span>头像</span>
      <div class="right">
        <img :src="imgSrc" alt="" />
        <svg viewBox="0 0 1024 1024" id="arrow-right" class="icon">
          <path
            d="M716.298 417.341l-.01.01L307.702 7.23l-94.295 94.649 408.591 410.117-408.591 410.137 94.295 94.639 502.891-504.76z"
            class="selected"
          ></path>
        </svg>
      </div>
    </section>
    <section class="section">
      <span>用户名</span>
      <div class="right-two">
        <span>{{ zhanghao }}</span>
        <svg viewBox="0 0 1024 1024" id="arrow-right" class="icon">
          <path
            d="M716.298 417.341l-.01.01L307.702 7.23l-94.295 94.649 408.591 410.117-408.591 410.137 94.295 94.639 502.891-504.76z"
            class="selected"
          ></path>
        </svg>
      </div>
    </section>
    <section class="section">
      <span>收货地址</span>
      <div class="right-two">
        <svg viewBox="0 0 1024 1024" id="arrow-right" class="icon">
          <path
            d="M716.298 417.341l-.01.01L307.702 7.23l-94.295 94.649 408.591 410.117-408.591 410.137 94.295 94.639 502.891-504.76z"
            class="selected"
          ></path>
        </svg>
      </div>
    </section>
    <section class="section" @click="change">
      <span>登录密码</span>
      <div class="right-two">
        <span>修改</span>
        <svg viewBox="0 0 1024 1024" id="arrow-right" class="icon">
          <path
            d="M716.298 417.341l-.01.01L307.702 7.23l-94.295 94.649 408.591 410.117-408.591 410.137 94.295 94.639 502.891-504.76z"
            class="selected"
          ></path>
        </svg>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      zhi: "",
      zhanghao: "",
      imgSrc: "",
    };
  },
  methods: {
    imgs(e) {
      var file = e.target.files[0];
      var reader = new FileReader();
      var that = this;
      reader.readAsDataURL(file);
      reader.onload = function (e) {
        that.imgSrc = this.result;
        localStorage.imgSrc = that.imgSrc;
      };
    },
    change() {
      this.$router.push("/Mypassword");
    },
    golast() {
      this.$router.go(-1);
    },
  },
  mounted() {
    this.zhanghao = localStorage.username;
    if (localStorage.imgSrc) {
      this.imgSrc = localStorage.imgSrc;
    } else {
      localStorage.imgSrc = "//elm.cangdu.org/img/default.jpg";
      this.imgSrc = localStorage.imgSrc;
    }
  },
};
</script>
<style scoped>
header {
  height: 2.95rem;
  border-bottom: 1rem solid #f5f5f5;
  color: #fff;
  font-weight: 700;
}
header svg {
  width: 1rem;
  height: 1rem;
}
.section:nth-of-type(1) {
  margin-top: 2.95rem;
}
.section {
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  position: relative;
  height: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.3rem;
}

.file {
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  opacity: 0;
}
.right-two {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 6rem;
  font-size: 0.5rem;
}
.right-two svg {
  width: 0.5rem;
  height: 0.5rem;
}
.right {
  width: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.right svg {
  width: 1rem;
  height: 1rem;
}
.right img {
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
}
</style>